/*------------------------------------------------------------- Color  START  ----------------------------------------------------------------*/
.color-33 {
  color: #333333;
}

.color-66 {
  color: #666666;
}

.color-99 {
  color: #999999;
}

.color-white {
  color: #FFFFFF;
}

.color-bg-white {
  background-color: white;
}

/*-------------------------------------------------------------- Color  END  ---------------------------------------------------------------*/
/*------------------------------------------------------------- Flex  START  ----------------------------------------------------------------*/
// flex相关
@mixin flex($direction:column) {
  display: flex;
  flex-direction: $direction;
}

//主轴垂直方向
.flex,
.flex-column,
.flex-y {
  @include flex;
}

//主轴水平方向
.flex-row,
.flex-x {
  @include flex('row');
}

// 主轴水平方向，起点在右侧
.flex-x-reverse,
.flex-row-reverse {
  @include flex('row-reverse')
}

// 主轴垂直方向，起点在下侧
.flex-y-reverse,
.flex-column-reverse {
  @include flex('column-reverse')
}

.center-flex {
  align-items: center;
  justify-content: center;
}

.center-x {
  align-items: center;
}

.between {
  justify-content: space-between;
}

.match-parent {
  flex: 1;
}

.flow {
  display: flex;
  flex-wrap: wrap;
}

.flex-shrink {
  /*防止被压缩*/
  flex-shrink: 0;
}

/*-------------------------------------------------------------- Flex  END  ---------------------------------------------------------------*/
/*------------------------------------------------------------- Font  START  ----------------------------------------------------------------*/
@mixin font-size($size: 12px) {
  font-size: $size;
}

/*-------------------------------------------------------------- Font  END  ---------------------------------------------------------------*/
/*------------------------------------------------------------- Text  START  ----------------------------------------------------------------*/
// 文字溢出隐藏显示...
@mixin text-overflow($line: 1) {
  @if $line==1 {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  } @else {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: $line;
    -webkit-box-orient: vertical;
  }
}

.single-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.text-center {
  text-align: center;
}


/*-------------------------------------------------------------- Text  END  ---------------------------------------------------------------*/
/*-------------------------------------------------------------   START  ----------------------------------------------------------------*/
::-webkit-scrollbar {
  display: none;
}

.scrollView-x {
  display: flex;
  white-space: nowrap;
  overflow-x: auto;
  box-sizing: border-box;
}

.item-scrollView-x {
  display: inline-block;
}

/*--------------------------------------------------------------   END  ---------------------------------------------------------------*/

// 三角
@mixin arrow($direction, $size, $color) {
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
  border-width: $size;
  cursor: pointer;

  @if $direction==top {
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent $color transparent;
    border-top: none;
  } @else if $direction==bottom {
    border-style: solid dashed dashed dashed;
    border-color: $color transparent transparent transparent;
    border-bottom: none;
  } @else if $direction==right {
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent $color;
    border-right: none;
  } @else if $direction==left {
    border-style: dashed solid dashed dashed;
    border-color: transparent $color transparent transparent;
    border-left: none;
  }
}

// 清除浮动引发的bug
@mixin clear {

  &:before,
  &:after {
    content: " ";
    display: table;
  }

  &:after {
    clear: both;
  }
}

// 水平居中(position || transform)
@mixin horizontal($type: position) {
  @if $type==position {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  @if $type==transform {
    position: relative;
    left: 50%;
    @include x(-50%);
  }
}

// 垂直居中(position || transform)
@mixin vertical($type: position) {
  @if $type==position {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
  }

  @if $type==transform {
    position: relative;
    top: 50%;
    @include y(-50%);
  }
}

// 整体居中(position || transform)
@mixin center($type: position) {
  @if $type==position {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

  @if $type==transform {
    position: relative;
    top: 50%;
    left: 50%;
    @include transform(translateX(-50%) translateY(-50%));
  }
}
